<template>
  <div class="activity-detail-page">

    <h4 class="section-title">基础信息</h4>
    <el-row :gutter="40" class="detail-block">
      <el-col :span="12">
        <div class="info-item">
          <span class="info-label">活动编号:</span>
          <span class="info-value">{{ detailData.activityName }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">开始时间:</span>
          <span class="info-value">{{ $commonUtils.getShowTime(detailData.startTime) }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">创建时间:</span>
          <span class="info-value">{{ $commonUtils.getShowTime(detailData.createTime) }}</span>
        </div>
        <!-- <div class="info-item">
          <span class="info-label">运营状态:</span>
          <span class="info-value status-active">{{ detailData.operationState }}</span>
        </div> -->
        <div class="info-item">
          <span class="info-label">门店名称:</span>
          <span class="info-value">{{ detailData.organizationName || '--' }}</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="info-item">
          <span class="info-label">活动名称:</span>
          <span class="info-value">{{ detailData.activityName }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">截止时间:</span>
          <span class="info-value">{{ $commonUtils.getShowTime(detailData.endTime) }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">活动状态:</span>
          <span :class="['info-value', getStatusClass(detailData.activityState)]">{{ detailData.activityState == 1 ?
            '未开始' : detailData.activityState == 2 ? '进行中' : detailData.activityState == 1 ?
              '已结束' : '已关闭' }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">门店编号:</span>
          <span class="info-value">{{ detailData.organizationId }}</span>
        </div>
      </el-col>
    </el-row>

    <h4 class="section-title">充值配置</h4>
    <div class="recharge-configs" v-if="detailData.rewardType == 2">
      <el-card v-for="(config, index) in detailData.itemList" :key="index" shadow="never"
        :class="['config-card card-highlight', { 'card-highlight': index === 0 }]">
        <div class="card-header">
          充值金额 {{ index + 1 }}
        </div>
        <div class="card-body">
          <div class="config-item">
            <span class="config-label">充值金额:</span>
            <span class="config-value">{{ ' ¥' + $amountUtils.getYuan(config.rechargeAmount) }} </span>
          </div>
          <div class="config-item">
            <span class="config-label">赠送礼品:</span>
            <span class="config-value">{{
              `${config.enableTakeCount}款（${config.giftGoods.length}选${config.enableTakeCount}）`}} <el-link
                type="primary" :underline="false" @click="openGiftDetail(config.giftGoods)">查看<i
                  class="el-icon-view el-icon--right"></i></el-link>
              <el-tooltip class="item" effect="dark" content="提示文案：充值该金额，可获得的礼品款数，同一个礼品赠送多个时，算一款" placement="top-start">
                <i style="margin-left: 20px;" class="el-icon-warning-outline"></i>
              </el-tooltip>
            </span>
          </div>
          <div class="config-item">
            <span class="config-label">礼品价值:</span>
            <span class="config-value">{{ ' ¥' + $amountUtils.getYuan(config.giftAmount) }}</span>
          </div>
          <div class="config-item">
            <span class="config-label">充值限制:</span>
            <span class="config-value">{{ `限制充值${config.limitCount}次` }} <el-tooltip class="item" effect="dark"
                content="考虑到线下礼品的库存数量，需要限制充值次数~" placement="top-start">
                <i style="margin-left: 20px;" class="el-icon-warning-outline"></i>
              </el-tooltip> </span>
          </div>
        </div>
      </el-card>
    </div>
    <div class="recharge-configs" v-else>
      <el-card v-for="(config, index) in detailData.itemList" :key="index" shadow="never"
        :class="['config-card card-highlight', { 'card-highlight': index === 0 }]">
        <div class="card-header">
          充值金额 {{ index + 1 }}
        </div>
        <div class="card-body">
          <div class="config-item">
            <span class="config-label">充值金额:</span>
            <span class="config-value">{{ ' ¥' + $amountUtils.getYuan(config.rechargeAmount) }} </span>
          </div>
          <div class="config-item">
            <span class="config-label">赠送金额:</span>
            <span class="config-value">{{ ' ¥' + $amountUtils.getYuan(config.giftAmount) }}</span>
          </div>
        </div>
      </el-card>
    </div>

    <h4 class="section-title">充值概况</h4>
    <el-table :data="[detailData]" border style="width: 100%"
      :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }" class="summary-table">
      <el-table-column prop="totalRechargeOrderCount" label="订单数量" align="center"
        :render-header="renderOrderCountHeader" />
      <el-table-column prop="totalRechargeAmount" label="支付金额" align="center" />
      <el-table-column prop="totalGiftAmount" label="赠送金额(价值)" align="center" v-if="detailData.rewardType == '赠送礼品'" />
      <el-table-column prop="totalGiftAmount" label="赠送金额" align="center" v-else />
      <!-- <el-table-column prop="giftProducts" label="赠送礼品" align="center" /> -->
    </el-table>

    <h4 class="section-title" v-if="detailData.rewardType == 2">礼品赠送</h4>
    <el-table v-if="detailData.rewardType == 2" :data="giftData" border style="width: 100%; margin-top: 10px;"
      :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }">
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column label="商品信息">
        <template slot-scope="scope">
          <div class="product-info-cell">
            <image-show :md5="scope.row.defaultPictureDownloadCode || ''" style="width:40px;height:40px;margin-right: 10px;" />
            <div class="product-details">
              <p class="product-name">{{ scope.row.goodsName }}</p>
              <p class="product-code">{{ scope.row.goodsCode }}</p>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="rowcurrentGoodsUnitType" label="包装" align="center" width="280">
        <template slot-scope="scope">
          <div style="text-align: center;">
            {{ scope.row.rowcurrentGoodsUnitType == 2 ? '中包装' : scope.row.rowcurrentGoodsUnitType == 3 ? '大包装' : '最小包装'
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="goodsCount" label="数量 / 份" align="center" width="280" />
      <el-table-column prop="takeCount" label="已赠送 / 份" align="center" width="280" />
    </el-table>
    <gift-detail-dialog :visible.sync="showGiftDetailDialog" :gift-list="currentGiftData" />
  </div>
</template>

<script>
import ListMixin from '@/mixins/modules/list'
import imageShow from '@/components/imageShow'

import GiftDetailDialog from './components/GiftDetailDialog.vue'
export default {
  mixins: [ListMixin], // 引入 Mixin
  components: {
    GiftDetailDialog,
    imageShow

  },
  data() {
    return {
      showGiftDetailDialog: false,
      currentGiftData: [],
      loading: false,
      // 模拟活动详情数据结构，匹配设计稿中的内容
      detailData: {
      },
      giftData: []
    }
  },
  created() {
    const query = this.$route.query
    console.log('加载活动详情:', query)
    const params = JSON.parse(decodeURIComponent(this.$Base64.decode(query.params)))
    console.log('加载活动详情:', params)
    if (query.params) {
      // this.detailData = params.item
      // this.getGiftDetails(params.item.itemList)
      this.loadData(params.item.rechargeActivityId)
    }
  },
  methods: {
    loadData(rechargeActivityId) {
      this.$api.getRechargeActivityDetail({ rechargeActivityId }).then(res => {
        console.log('card overview:', res)
        this.detailData = res
        this.detailData.totalRechargeAmount = ' ¥' + this.$amountUtils.getYuan(this.detailData.totalRechargeAmount)
        this.detailData.totalGiftAmount = ' ¥' + this.$amountUtils.getYuan(this.detailData.totalGiftAmount)
        this.getGiftDetails(res.itemList)
      })

    },
    renderOrderCountHeader(h, { column, $index }) {
      const tooltipContent = h('span', [
        h('el-tooltip', {
          props: {
            class: 'item',
            effect: 'dark',
            content: '已支付成功的订单数量',
            placement: 'top-start'
          }
        }, [
          h('i', {
            style: 'margin-left: 5px; cursor: pointer;',
            class: 'el-icon-warning-outline'
          })
        ])
      ]);
      return h('div', {
        style: 'display: flex; align-items: center; justify-content: center;'
      }, [
        h('span', '订单数量'),
        tooltipContent
      ]);
    },
    /**
     * @description 根据活动状态返回样式类
     */
    getStatusClass(status) {
      // 假设状态值: 1=未开始(灰色), 2=进行中(绿色), 3=已结束(红色)
      switch (status) {
        case 2:
          return 'status-success';
        case 4:
          return 'status-Warning';
        case 3:
          return 'status-danger';
        case 1:
        default:
          return 'status-info';
      }
    },
    /**
     * @description 打开礼品详情弹窗
     * @param {Array} giftList 传入的具体礼品列表数据
     */
    openGiftDetail(giftList) {
      this.currentGiftData = giftList
      this.showGiftDetailDialog = true
    },
    getGiftDetails(data) {
      const newFlatArray = data.flatMap(group => {
        return group.giftGoods;
      });
      this.giftData = newFlatArray;
      console.log(newFlatArray);
    },
  }
}
</script>

<style lang="scss" scoped>
.activity-detail-page {
  padding: 20px;
  background-color: #fff;
  min-height: 100vh;
  /* 假设是独立页面 */

  .section-title {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
    margin: 25px 0 15px 0;
    padding-left: 10px;
    border-left: 4px solid #409EFF;
  }

  /* 基础信息样式 */
  .detail-block {
    margin-bottom: 15px;
  }

  .info-item {
    line-height: 2;
    font-size: 14px;
    margin-bottom: 5px;
    display: flex;

    .info-label {
      color: #909399;
      display: inline-block;
      width: 90px;
      text-align: right;
      margin-right: 8px;
      flex-shrink: 0;
    }

    .info-value {
      color: #303133;
      font-weight: 500;
      word-break: break-all;
    }

    /* 状态颜色 */
    .status-success {
      color: #67C23A;
    }

    .status-danger {
      color: #F56C6C;
    }

    .status-Warning {
      color: #E6A23C;
    }

    .status-info {
      color: #909399;
    }

    .status-active {
      color: #409EFF;
      /* 运营状态使用蓝色 */
    }

    .price {
      font-weight: bold;
      color: #F07505;
    }
  }

  /* 充值配置卡片组样式 */
  .recharge-configs {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;

    .config-card {
      border: 1px solid #DCDFE6;
      border-radius: 4px;
      width: 20%;

      ::v-deep .el-card__header {
        background-color: #F8F8F8;
        border-bottom: 1px solid #EBEEF5;
        padding: 10px 15px;
      }

      ::v-deep .el-card__body {
        padding: 15px;
      }

      .card-header {

        font-weight: bold;
        color: #303133;
        margin-bottom: 5px;
      }

      .config-item {
        line-height: 1.8;
        font-size: 13px;
        margin-bottom: 5px;
      }

      .config-label {
        color: #909399;
        margin-right: 5px;
      }

      .config-value {
        color: #303133;
      }
    }

    .card-highlight {
      border-color: #409EFF;
      /* 突出显示第一个卡片 */
      box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.2);
    }
  }

  /* 概况和礼品表格样式 */
  .summary-table,
  .gift-table {
    margin-top: 10px;

    ::v-deep .el-table__cell:nth-child(2) .cell,
    ::v-deep .el-table__cell:nth-child(3) .cell {
      text-align: right;
    }
  }

  /* 商品信息表格单元格样式（复用之前的结构） */
  .product-info-cell {
    display: flex;
    align-items: center;
    padding: 5px 0;

    .product-image {
      width: 40px;
      height: 40px;
      margin-right: 10px;
      border: 1px solid #EBEEF5;
      flex-shrink: 0;
    }

    .product-details {
      min-width: 0;

      .product-name {
        font-size: 14px;
        color: #303133;
        margin: 0;
        line-height: 1.2;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .product-code {
        font-size: 12px;
        color: #909399;
        margin: 4px 0 0 0;
        line-height: 1.2;
      }
    }
  }
}
</style>
